import { VerticalBox,LineEdit } from "std-widgets.slint";
import { List } from "./components/types/types.slint";
import {  RadioGroup } from "./components/radio-group.slint";
import { TipMsg } from "./components/tip-msg.slint";
import { Popup } from "./components/popup.slint";
import { Popmsg } from "./components/popmsg.slint";
import { Loading } from "./components/loading.slint";

export component AppWindow inherits Window {
    width: 500px;
    height: 330px;
    default-font-size: 18px;
    default-font-family: "Helvetica,Verdana,Arial,sans-serif";
    icon: @image-url("./images/icon_css.png");
    title: "css转换器";
    // background: @linear-gradient(90deg, #2041a5 0%, #1f49c7 50%, #042EA7 100%);
    background: @linear-gradient(90deg, #4385e9 0%, #327ae6 50%, #1d69da 100%);
    in-out property <string> be_fontsize: 50;
    in-out property <string> be_width: 1920;
    in-out property <string> be_height: 1080;
    in-out property <string> be_filepath <=> flie_input.text;
    in-out property <duration> an_dutime: 200ms;
    in-out property <string> selected_index: "0";
    //tip-msg消息列表
    property <[List]> msgList:[
        { id:"0", name:"succ", value:"success !" },
        { id:"1", name:"erro1", value:"File path is not set" },
        { id:"2", name:"erro2", value:"File path not found" },
        { id:"3", name:"erro3", value:"No CSS files found in the directory" },
        { id:"4", name:"erro4", value:"CSS syntax error" },
        { id:"5", name:"erro5", value:"Invalid File path or Filename" }
    ];

  
  /**
   * 触发提示消息的回调函数
   * @param msg_type 消息类型，0 表示成功提示，其他值表示错误提示
   * @param index 消息列表索引。 
   * 
   */
    callback tip_msg(int, int);
    tip_msg(msg_type, index) => {
        if (msg_type == 0) {
            succ_tipmsg.textval = msgList[index].value;
            succ_tipmsg.show();
        } else {
            erro_tipmsg.textval = msgList[index].value;
            erro_tipmsg.show();
        }
    }
   
  /**
  确定转换按钮 回调
  */
    callback btnclicked();
  /**
  文件夹路径 回调
  */
    callback select_file();
    VerticalLayout {
        width: 75%;
        padding-top: 20px;
        alignment: center;
        Rectangle {
        // 成功消息提示
           
            succ_tipmsg := TipMsg {
                width: 100%;
                y: -40px;
                // msg_dutime: msg_dutime;
                background: @linear-gradient(90deg, #87eca6 0%, #31d882 50%, #16cf70 100%);
                an_dutime: an_dutime;
                color: #41418a;
            }
            //错误消息提示
           erro_tipmsg := TipMsg {
                width: 100%;
                y: -40px;
                // msg_dutime: msg_dutime;
                background: @linear-gradient(90deg, #ff6666 0%, #ff4d4d 50%, #d90000 100%);
                an_dutime: an_dutime;
                color: #f0f0f0;
            }

        
    
        // 窗口内容
        VerticalLayout {
                if selected_index == "0":VerticalLayout {
                    HorizontalLayout {
                        // alignment: center;
                        spacing: 10px;
                        Rectangle {
                            min-width: 150px;
                            // background: rebeccapurple;

                            HorizontalLayout {
                                alignment: start;
                                VerticalLayout {
                                    alignment: center;
                                    Text {
                                        text: "Font benchmark:";
                                        color: #fff;
                                    }
                                }
                            }
                        }

                        Rectangle {
                            horizontal-stretch: 1;
                            // background: orange;
                            LineEdit {
                                width: 100%;
                                placeholder-text: "font_size_num";
                                text: "\{root.be_fontsize}";
                                edited(text) => {
                                    root.be_fontsize = text;
                                }
                                //通过双向绑定到根目录属性 并设置一个回调给属性 
                                // 当 if外部 的元素点击时 在点击事件中修改 双向绑定到根目录属性
                                // private property <bool> clear-focus-propagation <=> root.clear-focus-propagation;
                                // changed clear-focus-propagation => {
                                //     if clear-focus-propagation == true {
                                //         self.clear-focus();
                                //     }
                                //     clear-focus-propagation = false;
                                // }

                            }

                            height: 30px;
                        }

                        padding-bottom: 15px;
                    }
                }
                if selected_index == "1":VerticalLayout {
                    HorizontalLayout {
                        spacing: 10px;
                        Rectangle {
                            min-width: 150px;
                            // background: rebeccapurple;
                            HorizontalLayout {
                                alignment: start;
                                VerticalLayout {
                                    alignment: center;
                                    Text {
                                        text: "Width benchmark:";
                                        color: #fff;
                                    }
                                }
                            }
                        }

                        Rectangle {
                            LineEdit {
                                width: 100%;
                                placeholder-text: "width_num";
                                text: "\{root.be_width}";
                                edited(text) => {
                                    root.be_width = text;
                                }
                            }

                            height: 30px;
                        }

                        padding-bottom: 15px;
                    }

                    HorizontalLayout {
                        spacing: 10px;
                        Rectangle {
                            width: 150px;
                            // background: rebeccapurple;
                            HorizontalLayout {
                                VerticalLayout {
                                    alignment: center;
                                    Text {
                                        text: "Height benchmark:";
                                        color: #fff;
                                    }
                                }
                            }
                        }

                        Rectangle {
                            horizontal-stretch: 1;
                            LineEdit {
                                width: 100%;
                                placeholder-text: "height_num";
                                text: "\{root.be_height}";
                                edited(text) => {
                                    root.be_height = text;
                                }
                            }

                            height: 30px;
                        }

                        padding-bottom: 15px;
                    }
                }
                VerticalLayout {
                    HorizontalLayout {
                        spacing: 10px;
                        Rectangle {
                            min-width: 150px;
                            // background: rebeccapurple;
                            HorizontalLayout {
                                alignment: start;
                                VerticalLayout {
                                    alignment: center;
                                    Text {
                                        text: "Files path:";
                                        color: #fff;
                                    }
                                }
                            }
                        }

                        Rectangle {
                            width: 130px;
                            // background: orange;
                            // horizontal-stretch: 1;
                          flie_input := LineEdit {
                                width: 100%;
                                placeholder-text: "files_path";
                                text: "";
                                font-size: 14px;
                                edited(text) => {
                                    flie_input.text = text;
                                    // root.be_filepath=text;
                                }
                            }

                            height: 30px;
                        }

                        Rectangle {
                            horizontal-stretch: 1;
                            border-radius: 3px;
                            VerticalLayout {
                                padding-left: 4px;
                                padding-right: 4px;
                                alignment: center;
                                HorizontalLayout {
                                    alignment: center;
                                    Text {
                                        text: "choose";
                                        color: #fff;
                                    }
                                }
                            }

                            background: select_file.pressed ? #1f096d : @linear-gradient(90deg, #1552fa, #4715fa);
                            select_file := TouchArea {
                                mouse-cursor: pointer;
                                clicked => {
                                    root.select_file();
                                    flie_input.clear-focus();
                                }
                            }
                        }

                        padding-bottom: 15px;
                    }
                }
            }
        }
       //切换内容    
       RadioGroup {
            checklist: [{
                id:"0",
                value:"0",
                name:"convert_rem",
            }, {
                id:"1",
                value:"1",
                name:"convert_vw",
            }];
            an_dutime: an_dutime;
            selected_index: self.checklist[0].value;
            clicked(value) => {
                self.selected_index = value;
                root.selected_index = value;
            }
        }

        Rectangle {
            // background: rebeccapurple;
            HorizontalLayout {
                alignment: center;
                Rectangle {
                    width: 200px;
                    height: 40px;
                    border-radius: 5px;
                    Text {
                        font-size: 16px;
                        text: "Enter";
                        color: #fff;
                    }
                
                    // background: area.pressed ? #2559d1 : @linear-gradient(90deg,   #4d8be7 , #2663F2);
                    background: area.pressed ? #1f096d : @linear-gradient(90deg, #1552fa, #4715fa);
                    animate background { duration: an_dutime; }
                    area := TouchArea {
                        mouse-cursor: pointer;
                        clicked => {
                            if (root.selected_index == "0") {
                                if (root.be_fontsize.is-float()) {
                                    root.btnclicked();
                                } else {
                                    // debug("请输入有效数字");
                                    popup.show();
                                }
                            } else {
                                if (root.be_width.is-float() && root.be_height.is-float()) {
                                    root.btnclicked();
                                } else {
                                    // debug("请输入有效数字");
                                    popup.show();
                                }
                            }
                            //清除if作用域中的input焦点
                            flie_input.focus();
                            flie_input.clear-focus();
                        }
                    }
                }
            }
        }
    }

   //输入无效数字的提示弹窗 
    popup := Popup {
        Popmsg {
            context_text: "please input number!";
            an_dutime: an_dutime;
            clicked => {
                debug("hide");
                popup.hide();
            }
        }
    }

    callback wait_popup_show();
    wait_popup_show() => {
        wait_popup.show();
        // debug("show");
    }
    callback wait_popup_hide();
    wait_popup_hide() => {
        wait_popup.hide();
        // debug("hid");
    }
    wait_popup := Popup {
        Loading { }
    }
}
